<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #code{
            width: 60px;
            text-align: center;
            background-color: #ddd;
            letter-spacing: 3px;
            border: 0;
            font-style: italic;
            line-height: 2;
            display: inline-block;
        }
    </style>
</head>
<body>

    <p>
        <label for="">请输入姓名</label>
        <input type="text" id="username">
        <span id="userSpan">请输入6-12位，数字或者字母组成，且数字不能开头</span>
    </p>
    <p>
        <label for="">请输入密码</label>
        <input type="text">
        <span>请输入6-12位，数字，字母组成</span>
    </p>
    <p>
        <label for="">确认密码</label>
        <input type="text">
        <span>请输入相同的密码</span>
    </p>
    <p>
        <input type="text" placeholder="请输入验证码">
        <input id="code" type="text" disabled >
        <button>刷新</button>
        <span>验证码不分大小写</span>
    </p>
    <p>
        <button id="btn">提交</button>
    </p>


    <script>

        // 获取元素
        var oUser = document.getElementById('username') ;
        var oUserSpan = document.getElementById('userSpan') ;
        var oBtn = document.getElementById('btn') ;

        var oCode = document.getElementById('code') ;


        var bigArr = [] ;
        for(var i = 65 ; i <= 90 ; i++) {
            var s = String.fromCharCode(i) ;
            bigArr.push(s) ;
        }
        console.log(bigArr);


        var smallArr = [] ;
        for(var i = 97 ; i <= 122 ; i++) {
            var s = String.fromCharCode(i) ;
            smallArr.push(s) ;
        }
        console.log(smallArr);


        var numArr = [] ;
        for(var i = 0 ; i <= 9 ; i++) {
            numArr.push('' + i) ;
        }


        var allArr = smallArr.concat(bigArr , numArr) ;

        console.log(allArr);




        // 页面一打开的时候，验证码就要显示
        oCode.value = code(5) ;




        // 绑定事件
        oBtn.onclick = function() {
            // 验证用户名
            var user = oUser.value.trim() ;

            // 验证是否输入了
            if(user === '') {
                oUserSpan.innerHTML = '用户名不能为空';
                oUserSpan.style.color = 'red' ;
                return ;   // 提前结束函数
            }

            // 验证长度
            if(user.length < 6 || user.length > 12) {
                oUserSpan.innerHTML = '用户名长度必须是6-12位';
                oUserSpan.style.color = 'red' ;
                return ;   // 提前结束函数
            }

            
            // 验证数字不能开头    !isNaN()
            if(user[0] >= 0 && user[0] <= 9) {
                oUserSpan.innerHTML = '数字不能开头';
                oUserSpan.style.color = 'red' ;
                return ;   // 提前结束函数
            }

            // 验证合法  ----
            //   思路：把所有的合法的字符都放在一个数组中
            //    每一个字符都要判断
            for(var i in user) {
                if(allArr.includes(user[i]) === false) {
                    oUserSpan.innerHTML = '用户名必须由数字或者字母组成';
                    oUserSpan.style.color = 'red' ;
                    // break ;
                    return ;   // 提前结束函数
                }
            }


            // 验证通过
            oUserSpan.innerHTML = '√' ;
            oUserSpan.style.color = 'green' ;


            // 加上密码强弱的判断

        }













        function rand(min,max) {
            return parseInt(Math.random() * (max - min)) + min
        }

        function code(n) {
            n = n || 5;

            var codeArr = [];
            for (var i = 0; i < n; i++) {
                codeArr.push(allArr[rand(0, allArr.length)]);
            }

            console.log(codeArr);   // 数组

            // 小写   大写   数字   
            var flag = 0 ;
            for(var i = 0 ; i < codeArr.length ; i++) {
                // 判断小写  
                if(smallArr.includes(codeArr[i])) {
                    flag++ ;
                    break ;  // 必须的   小写可能不止一个
                }
            }

            for(var i = 0 ; i < codeArr.length ; i++) {
                // 判断大写  
                if(bigArr.includes(codeArr[i])) {
                    flag++ ;
                    break ;
                }
            }


            for(var i = 0 ; i < codeArr.length ; i++) {
                // 判断小数字 
                if(numArr.includes(codeArr[i])) {
                    flag++ ;
                    break ;
                }
            }



            if(flag === 3) {
                return codeArr.join('') ;
            }
            return code(n) ;
        }


       


    </script>
    
</body>
</html>